import { PureComponent } from 'react';
import {
  Scene, PerspectiveCamera, BoxGeometry,
  MeshBasicMaterial, Mesh, WebGLRenderer,
  Vector3
} from 'three';

class Index extends PureComponent {

  componentDidMount() {
    const scene = new Scene();

    // const camera = new PerspectiveCamera(45, 400 / 300, 1, 10);
    const camera = new PerspectiveCamera(60, 400 / 300, 1, 10);
    //fov变大, 视景体变大, 几何体相对视景体就小了, 因此看起来就小了
    // 注意，改变fov并不会引起画面横竖比例的变化，而改变aspect则会改变横竖比例
    camera.position.set(0, 0, 5);
    
    const geometry = new BoxGeometry(1, 1, 1);
    const material = new MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true
    });
    const mesh = new Mesh(geometry, material);
    scene.add(mesh);

    const canvas = document.getElementById('mainCanvas');
    const renderer = new WebGLRenderer({
      canvas
    });
    
    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400px"
        height="300px"
      />
    );
  }
}

export default Index;